<template>
  <div class="course-info">
    <van-cell class="course-image">
      <van-image
        :src="course.courseImgUrl"
        width="100%"
        height="280"
      ></van-image>
    </van-cell>

    <van-cell class="course-description">
      <h2 v-text="course.courseName"></h2>
      <p v-text="course.previewFirstField"></p>
      <div class="course-sale-info">
        <div class="course-price">
          <span class="discounts">¥{{course.discounts}}</span>
          <span class="price">¥{{course.price}}</span>
        </div>
        <span class="tag">{{course.sales}}已购</span>
        <span class="tag">每周三、五更新</span>
      </div>
    </van-cell>

    <van-cell class="course-content">
      <van-tabs v-model="activeName" sticky>
        <van-tab title="详情" name="detail">
          <div v-html="course.courseDescription"></div>
        </van-tab>
        <van-tab title="内容" name="content">
          <div v-for="section in sectionList" :key="section.id" class="section-and-lesson">
            <h2>{{section.sectionName}}</h2>
            <p v-for="lesson in section.courseLessons" :key="lesson.id" class="lesson"
               @click="handleClickLesson(lesson)">
              <span v-text="lesson.theme"></span>
              <van-icon name="play-circle" size="20" v-if="lesson.canPlay"></van-icon>
              <van-icon name="lock" size="20" v-else></van-icon>
            </p>
          </div>
        </van-tab>
      </van-tabs>
    </van-cell>

    <van-cell class="course-pay">
      <div class="price-info">
        <span>限时优惠</span>
        <span class="discounts">¥{{course.discounts}}</span>
        <span class="price">¥{{course.price}}</span>
      </div>
      <van-button type="primary" class="pay-button" @click="handlePay">立即购买</van-button>
    </van-cell>
  </div>
</template>

<script>
  import { getCourseById, getSectionAndLesson } from '@/services/course'

  export default {
    name: 'CourseInfo',
    props: {
      courseId: {
        type: [Number, String],
        required: true,
      },
    },
    data() {
      return {
        course: {},
        activeName: 'detail',
        sectionList: [],
      }
    },
    created() {
      this.loadCourseInfo()
      this.loadSectionAndLesson()
    },
    methods: {
      async loadCourseInfo() {
        const { content } = await getCourseById(this.courseId)
        this.course = content
      },
      async loadSectionAndLesson() {
        const { content } = await getSectionAndLesson(this.courseId)
        this.sectionList = content.courseSectionList
      },
      handleClickLesson(lesson) {
        if (lesson.canPlay) {
          this.$router.push({
            name: 'lesson-video',
            params: {
              lessonId: lesson.id,
            }
          })
        }
      },
      handlePay() {
        if (this.$store.state.user) {
          this.$router.push({
            name: 'pay',
            params: {
              courseId: this.courseId,
            }
          })
        } else {
          this.$router.push({
            name: 'login',
            query: {
              redirect: this.$route.fullPath
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .course-image {
    height: 280px;
    padding: 0;
  }

  .course-description {
    padding: 10px 20px;

    .course-sale-info {
      display: flex;
      align-items: center;

      .course-price {
        flex: 1;

        .discounts {
          color: #ff7452;
          font-size: 24px;
          font-weight: 700;
          margin-right: 5px;
          margin-left: 2px;
        }

        .price {
          text-decoration: line-through;
        }
      }

      .tag {
        height: 15px;
        line-height: 15px;
        padding: 7px 8px;
        background: #f8f9fa;
        border-radius: 2px;
        font-size: 12px;
        font-weight: 700;
        color: #666;
        margin-left: 10px;
      }
    }
  }

  .course-content {

    .section-and-lesson {
      padding: 0 20px;

      .lesson {
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .course-info {
    margin-bottom: 50px;
  }

  .course-pay {
    height: 50px;
    padding-bottom: 0;
    padding-top: 0;
    position: fixed;
    bottom: 0;
    z-index: 100;

    .van-cell__value {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .discounts {
      color: #ff7452;
      font-size: 24px;
      font-weight: 700;
      margin-right: 5px;
      margin-left: 2px;
    }

    .price {
      text-decoration: line-through;
    }

    .pay-button {
      width: 40%;
    }
  }
</style>
